<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>
  </head>
  <!-- 

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM
 绑定至底层 Vue 实例的数据。所有 Vue.js 
 的模板都是合法的 HTML，所以能被遵循规范的浏览器
 和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 
DOM 渲染函数。结合响应系统，Vue 能够
智能地计算出最少需要重新渲染多少组件
，并把 DOM 操作次数减到最少

   -->
  <body>
    <div id="app">
      <!-- 
            文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
        -->
      <span>Message: {{ msg }}</span>
      <!-- Mustache 标签将会被替代为对应数据对象上 msg property 的值
        。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
        通过使用 v-once 指令，你也能执行一次性地插值，
        当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定： 
    -->
      <span v-once>这个将不会改变: {{ msg }}</span>
      <!-- ############################################################3 -->
      <!-- 
        原始 HTML： 双大括号会将数据解释为普通文本，而非 HTML 代码。
        为了输出真正的 HTML，你需要使用 v-html 指令
       -->
      <p>Using mustaches: {{ rawHtml }}</p>
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      <!-- 
        这个 span 的内容将会被替换成为 property 值 rawHtml，
        直接作为 HTML——会忽略解析 property 值中的数据绑定。
        注意，你不能使用 v-html 来复合局部模板，因为 Vue 
        不是基于字符串的模板引擎。反之，对于用户界面 (UI)，
        组件更适合作为可重用和可组合的基本单位。
       -->

      <!-- 
         Attribute:
         Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令
        -->
      <button v-bind:disabled="isButtonDisabled">Button</button>
      <!-- 如果 isButtonDisabled 的值是 null、undefined 或 false，
        则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。 
          isButtonDisabled:true不能点击 isButtonDisabled:false可以点击
      -->

      <!-- 
        使用 JavaScript 表达式：
        迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。
        但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
       -->

      {{ number + 1 }} {{ ok ? 'YES' : 'NO' }}
      {{message.split('').reverse().join('') }}

      <div v-bind:id="'list-' + id"></div>
      <!-- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，
        如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。 -->
    </div>
  </body>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        msg: 1,
        rawHtml: "<h1>你好</h1>",
        isButtonDisabled: false,
        number: 10,
        ok: 1 === 1,
        message: "nihao hi",
        list: { a: 1 },
        id: 1,
      },
    });
    vue.$data.msg = 2;
  </script>
</html>
